@{
    ViewData["Title"] = "智能问答";
    Layout = "_Layout";
}

<div class="layui-container-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <!-- 会话历史 -->
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>会话历史</h3>
                    <button class="layui-btn layui-btn-xs layui-btn-normal" id="newSessionButton">
                        <i class="fas fa-plus"></i> 新会话
                    </button>
                </div>
                <div class="layui-card-body">
                    <div id="sessionList">
                        <!-- 会话列表将通过JavaScript动态加载 -->
                        <div class="layui-text-center layui-text-gray">暂无会话</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-col-md9">
            <!-- 聊天界面 -->
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>智能问答</h3>
                    <span id="currentSession" class="layui-text-gray">当前会话: 新会话</span>
                </div>
                <div class="layui-card-body">
                    <!-- 聊天消息区域 -->
                    <div id="chatMessages" class="chat-messages" style="height: 400px; overflow-y: auto; border: 1px solid #e6e6e6; padding: 15px; margin-bottom: 15px; background-color: #f8f8f8; border-radius: 4px;">
                        <div class="layui-text-center layui-text-gray">
                            <i class="fas fa-comments"></i> 开始您的智能问答之旅
                        </div>
                    </div>
                    
                    <!-- 输入区域 -->
                    <div class="layui-form">
                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block" style="margin-left: 0;">
                                <textarea id="messageInput" placeholder="请输入您的问题..." class="layui-textarea" style="resize: none; height: 80px;"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left: 0;">
                                <button type="button" class="layui-btn layui-btn-normal" id="sendButton">
                                    <i class="fas fa-paper-plane"></i> 发送
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary" id="refreshButton">
                                    <i class="fas fa-refresh"></i> 刷新
                                </button>
                                <button type="button" class="layui-btn layui-btn-warm" id="clearButton">
                                    <i class="fas fa-trash"></i> 清空
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.chat-messages {
    background-color: #f8f8f8;
    border-radius: 4px;
}

.message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.message.user {
    justify-content: flex-end;
}

.message.assistant {
    justify-content: flex-start;
}

.message-content {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 4px;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message.user .message-content {
    background-color: #1E9FFF;
    color: white;
}

.message.assistant .message-content {
    background-color: white;
    border: 1px solid #e6e6e6;
}

.message-time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.session-item {
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: white;
}

.session-item:hover {
    background-color: #f2f2f2;
    border-color: #1E9FFF;
}

.session-item.active {
    background-color: #e3f2fd;
    border-color: #1E9FFF;
    color: #1E9FFF;
}

.session-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.session-time {
    font-size: 12px;
    color: #999;
}

/* 确保按钮样式正确 */
.layui-btn {
    margin-right: 10px;
}

.layui-btn:last-child {
    margin-right: 0;
}
</style>

@section Scripts {
    <script>
        // 全局变量
        var currentSessionId = null;
        var sessions = [];

        // 页面加载完成后执行
        function initializeChat() {
            console.log('Chat页面初始化开始');
            
            // 检查jQuery和ApiConfig是否可用
            if (typeof $ === 'undefined') {
                console.error('jQuery未加载！');
                alert('页面加载错误：jQuery未正确加载');
                return;
            }
            
            if (typeof ApiConfig === 'undefined') {
                console.error('ApiConfig未加载！');
                alert('页面加载错误：ApiConfig未正确加载');
                return;
            }
            
            console.log('jQuery和ApiConfig可用，开始绑定事件');
            console.log('API配置信息:', {
                baseUrl: ApiConfig.baseUrl,
                qaApi: ApiConfig.qaApi.baseUrl
            });
            
            // 使用原生JavaScript绑定事件
            var sendButton = document.getElementById('sendButton');
            var refreshButton = document.getElementById('refreshButton');
            var clearButton = document.getElementById('clearButton');
            var newSessionButton = document.getElementById('newSessionButton');
            var messageInput = document.getElementById('messageInput');
            
            console.log('按钮元素检查：');
            console.log('发送按钮:', sendButton ? '存在' : '不存在');
            console.log('刷新按钮:', refreshButton ? '存在' : '不存在');
            console.log('清空按钮:', clearButton ? '存在' : '不存在');
            console.log('新会话按钮:', newSessionButton ? '存在' : '不存在');
            console.log('消息输入框:', messageInput ? '存在' : '不存在');
            
            // 绑定按钮点击事件 - 使用原生JavaScript
            if (sendButton) {
                sendButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('发送按钮被点击（原生事件）');
                    sendMessage();
                });
            }
            
            if (refreshButton) {
                refreshButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('刷新按钮被点击（原生事件）');
                    refreshChat();
                });
            }
            
            if (clearButton) {
                clearButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('清空按钮被点击（原生事件）');
                    clearChat();
                });
            }
            
            if (newSessionButton) {
                newSessionButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('新会话按钮被点击（原生事件）');
                    createNewSession();
                });
            }
            
            // 绑定回车键发送消息
            if (messageInput) {
                messageInput.addEventListener('keypress', function(e) {
                    if (e.which === 13 && !e.shiftKey) {
                        e.preventDefault();
                        console.log('回车键被按下（原生事件）');
                        sendMessage();
                    }
                });
            }
            
            // 加载会话历史
            loadSessions();
            
            console.log('Chat页面初始化完成');
        }

        // 发送消息
        function sendMessage() {
            console.log('sendMessage函数被调用');
            
            var messageInput = $('#messageInput');
            var message = messageInput.val().trim();
            
            console.log('消息内容:', message);
            
            if (!message) {
                console.log('消息为空，显示提示');
                alert('请输入消息内容');
                return;
            }
            
            // 如果没有会话ID，先创建会话
            if (!currentSessionId) {
                console.log('没有会话ID，先创建会话');
                createNewSessionAndSendMessage(message);
                return;
            }
            
            console.log('直接发送消息，会话ID:', currentSessionId);
            // 直接发送消息
            sendMessageToServer(message);
        }

        // 创建新会话并发送消息
        function createNewSessionAndSendMessage(message) {
            console.log('createNewSessionAndSendMessage被调用，消息:', message);
            
            var sessionTitle = '新会话 ' + new Date().toLocaleString('zh-CN');
            
            // 显示加载状态
            var loadingId = addMessageToChat('assistant', '正在创建会话...');
            
            console.log('开始创建会话，标题:', sessionTitle);
            
            // 使用ApiConfig创建会话
            var sessionData = {
                title: sessionTitle,
                description: '新创建的会话',
                userId: 'user123',
                modelName: 'gpt-3.5-turbo'
            };
            
            var sessionUrl = ApiConfig.getQaApiUrl('sessions');
            console.log('创建会话URL:', sessionUrl);
            
            ApiConfig.post(sessionUrl, sessionData)
                .then(function(response) {
                    console.log('创建会话成功，响应:', response);
                    
                    // 移除创建会话的加载状态
                    $('#message-' + loadingId).remove();
                    
                    if (response.success) {
                        var createdSession = response.data;
                        sessions.unshift(createdSession);
                        currentSessionId = createdSession.id;
                        
                        console.log('会话创建成功，ID:', currentSessionId);
                        
                        // 更新界面
                        updateSessionList();
                        updateCurrentSession(createdSession.title);
                        
                        // 添加用户消息到界面
                        addMessageToChat('user', message);
                        $('#messageInput').val('');
                        
                        // 发送消息到服务器
                        sendMessageToServer(message);
                        
                        alert('新会话已创建');
                    } else {
                        console.log('创建会话失败:', response.message);
                        alert('创建会话失败: ' + (response.message || '未知错误'));
                    }
                })
                .catch(function(error) {
                    console.error('创建会话失败:', error);
                    
                    // 移除创建会话的加载状态
                    $('#message-' + loadingId).remove();
                    
                    alert('网络错误，请检查连接后重试');
                });
        }

        // 发送消息到服务器
        function sendMessageToServer(message) {
            console.log('sendMessageToServer被调用，消息:', message, '会话ID:', currentSessionId);
            
            // 显示加载状态
            var loadingId = addMessageToChat('assistant', '正在思考...');
            
            // 使用ApiConfig发送消息
            var chatData = {
                sessionId: currentSessionId,
                message: message,
                modelName: 'gpt-3.5-turbo'
            };
            
            var chatUrl = ApiConfig.getQaApiUrl('chat');
            console.log('发送消息URL:', chatUrl);
            
            ApiConfig.post(chatUrl, chatData)
                .then(function(response) {
                    console.log('发送消息成功，响应:', response);
                    
                    // 移除加载状态
                    $('#message-' + loadingId).remove();
                    
                    if (response.success) {
                        // 添加AI回复
                        addMessageToChat('assistant', response.data.content || response.data.answer);
                    } else {
                        addMessageToChat('assistant', '抱歉，我无法回答您的问题。请稍后再试。');
                    }
                })
                .catch(function(error) {
                    console.error('发送消息失败:', error);
                    
                    // 移除加载状态
                    $('#message-' + loadingId).remove();
                    
                    addMessageToChat('assistant', '网络错误，请检查连接后重试。');
                });
        }

        // 添加消息到聊天界面
        function addMessageToChat(type, content) {
            var messageId = 'msg_' + Date.now();
            var time = new Date().toLocaleTimeString('zh-CN');
            
            console.log('添加消息到聊天界面:', {type: type, content: content, messageId: messageId});
            
            var messageHtml = '<div id="' + messageId + '" class="message ' + type + '">' +
                '<div class="message-content">' +
                '<div>' + content + '</div>' +
                '<div class="message-time">' + time + '</div>' +
                '</div>' +
                '</div>';
            
            $('#chatMessages').append(messageHtml);
            
            // 滚动到底部
            var chatMessages = document.getElementById('chatMessages');
            chatMessages.scrollTop = chatMessages.scrollHeight;
            
            return messageId;
        }

        // 刷新聊天
        function refreshChat() {
            if (currentSessionId) {
                loadSessionMessages(currentSessionId);
            } else {
                alert('请先选择或创建一个会话');
            }
        }

        // 清空聊天
        function clearChat() {
            if (confirm('确定要清空当前会话的所有消息吗？')) {
                $('#chatMessages').html('<div class="layui-text-center layui-text-gray"><i class="fas fa-comments"></i> 开始您的智能问答之旅</div>');
            }
        }

        // 创建新会话
        function createNewSession() {
            var sessionTitle = '新会话 ' + new Date().toLocaleString('zh-CN');
            
            // 使用ApiConfig创建会话
            var sessionData = {
                title: sessionTitle,
                description: '新创建的会话',
                userId: 'user123',
                modelName: 'gpt-3.5-turbo'
            };
            
            var sessionUrl = ApiConfig.getQaApiUrl('sessions');
            console.log('创建会话URL:', sessionUrl);
            
            ApiConfig.post(sessionUrl, sessionData)
                .then(function(response) {
                    if (response.success) {
                        var createdSession = response.data;
                        sessions.unshift(createdSession);
                        currentSessionId = createdSession.id;
                        
                        // 更新界面
                        updateSessionList();
                        updateCurrentSession(createdSession.title);
                        clearChat();
                        
                        alert('新会话已创建');
                    } else {
                        alert('创建会话失败: ' + (response.message || '未知错误'));
                    }
                })
                .catch(function(error) {
                    console.error('创建会话失败:', error);
                    alert('网络错误，请检查连接后重试');
                });
        }

        // 加载会话历史
        function loadSessions() {
            // 使用ApiConfig加载会话
            var parameters = {
                userId: 'user123',
                pageIndex: 1,
                pageSize: 50
            };
            
            var sessionsUrl = ApiConfig.getQaApiUrl('sessions', null, parameters);
            console.log('加载会话URL:', sessionsUrl);
            
            ApiConfig.get(sessionsUrl)
                .then(function(response) {
                    if (response.success) {
                        sessions = response.data || [];
                        updateSessionList();
                        
                        if (sessions.length > 0) {
                            // 选择第一个会话
                            selectSession(sessions[0].id);
                        }
                    } else {
                        alert('加载会话失败: ' + (response.message || '未知错误'));
                    }
                })
                .catch(function(error) {
                    console.error('加载会话失败:', error);
                    alert('网络错误，请检查连接后重试');
                });
        }

        // 更新会话列表
        function updateSessionList() {
            var sessionList = $('#sessionList');
            sessionList.empty();
            
            if (sessions.length === 0) {
                sessionList.append('<div class="layui-text-center layui-text-gray">暂无会话</div>');
                return;
            }
            
            for (var i = 0; i < sessions.length; i++) {
                var session = sessions[i];
                var sessionHtml = '<div class="session-item ' + (session.id === currentSessionId ? 'active' : '') + '" data-session-id="' + session.id + '">' +
                    '<div class="session-title">' + session.title + '</div>' +
                    '<div class="session-time">' + formatDate(session.createdAt || session.createTime) + '</div>' +
                    '</div>';
                sessionList.append(sessionHtml);
            }
            
            // 绑定会话点击事件
            $('.session-item').on('click', function() {
                var sessionId = $(this).data('session-id');
                selectSession(sessionId);
            });
        }

        // 选择会话
        function selectSession(sessionId) {
            currentSessionId = sessionId;
            var session = null;
            
            for (var i = 0; i < sessions.length; i++) {
                if (sessions[i].id === sessionId) {
                    session = sessions[i];
                    break;
                }
            }
            
            if (session) {
                updateCurrentSession(session.title);
                loadSessionMessages(sessionId);
                updateSessionList(); // 更新选中状态
            }
        }

        // 更新当前会话显示
        function updateCurrentSession(title) {
            $('#currentSession').text('当前会话: ' + title);
        }

        // 加载会话消息
        function loadSessionMessages(sessionId) {
            var parameters = {
                pageIndex: 1,
                pageSize: 100
            };
            
            var messagesUrl = ApiConfig.getQaApiUrl('sessionMessages', {id: sessionId}, parameters);
            console.log('加载消息URL:', messagesUrl);
            
            ApiConfig.get(messagesUrl)
                .then(function(response) {
                    if (response.success) {
                        displayMessages(response.data || []);
                    } else {
                        alert('加载消息失败: ' + (response.message || '未知错误'));
                    }
                })
                .catch(function(error) {
                    console.error('加载消息失败:', error);
                    alert('网络错误，请检查连接后重试');
                });
        }

        // 显示消息
        function displayMessages(messages) {
            var chatMessages = $('#chatMessages');
            chatMessages.empty();
            
            if (messages.length === 0) {
                chatMessages.html('<div class="layui-text-center layui-text-gray"><i class="fas fa-comments"></i> 开始您的智能问答之旅</div>');
                return;
            }
            
            for (var i = 0; i < messages.length; i++) {
                var msg = messages[i];
                var messageType = msg.messageType === 'User' ? 'user' : 'assistant';
                addMessageToChat(messageType, msg.content);
            }
        }

        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '';
            var date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }

        // 等待页面完全加载后初始化
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializeChat);
        } else {
            // 页面已经加载完成
            initializeChat();
        }
    </script>
} 
